Let's take a quick look at guys in this video.
The first one we're going to go over our screen, guys, and they are 2D objects that appear on our
screen.
We can create a screen UI in the starter GUI here.
And inside the starter GI, we can place several elements such as frames, text buttons, text labels,
image labels, text boxes, and even image buttons.
Let's go ahead and take a look at some of the properties of the screen GI here.
So this first one here is called Display Order, and this is basically the Z index for the UI.
If there happens to be multiple screens UI's on the player screen, then this will tell you which order
you would like the screens UI to render.
So a higher number takes a higher precedence over another screens UI.
So it will render above it.
The next one here is called Ignore UI inset.
And this one's pretty simple.
If you've played a game, you notice there's this bar at the top of your screen and it holds like the
chat button, the setting icon, stuff like that.
This tells the guy whether or not you'd like to respect that line up there and only put the guy on the
bottom portion of the screen or completely ignore it and cover the entire screen with the UI.
This other one here is called Reset on Spawn, and this is just basically for when the player dies and
then respond to a new character.
Whether or not you'd like to delete the UI or if the guy is and started UI like here, it'll get deleted
from the player's player UI folder and then a new copy will be placed in that folder.
The last property is Z index behavior and this changes how the Z index is used to render UI elements.
So when it's set to sibling, the children will always render above their parents and their Z indexes
are used to decide how they will render over any of their other siblings if they have any.
While global means that all the UI elements will be rendered in accordance with their Z indexes, so
any children of a UI element will only render above their parent if their Z index is equal to or greater
than the parents Z index.
So to kind of show off the screen guy, let's put a simple maybe like a text label in here.
And as you can see in the top left of our screen, it has placed this text label here, and this text
label has a bunch of properties.
I'm not going to go over all of them, but I will explain the most important ones that belong to all
Jai elements.
So this one appears active and this basically tells the game whether or not you like this text label
to fire events on it.
So if somebody hovers their mouse over it or clicks it or whatever, it starts firing mouse related
events.
The next one is anchor point.
This one's pretty simple.
It just sets the anchoring point by default.
That is the top left of our UI element, but I can change it here to be something else.
So maybe like I want the anchor point to be in the middle of our text label and as you can see, it
shifts our label off the screen because the current position is set to 000, which is up in this corner
up here.
You can basically think of this as a 2D plane like here you have your x axis, here, you have your
y axis, but it's actually positive in this direction.
It's not negative and it's positive in this direction as well.
Next one here is automatic size.
And this is basically for when any children of my text label or the text itself starts going beyond
the boundaries of it.
Like you see this defined edge here.
Once any children or the text goes beyond it, this determines whether or not we want to automatically
scale the size of our text label to encompass any of those objects within the boundaries that has defined.
So we can choose that for the x axis, the y axis, or both the x and y axis.
So, for example, here, I'm just going to quickly move the position to the center of the screen.
Just ignore what I'm doing for now.
I'll explain it in a little bit.
But if I set this automatic size to like X and then I start typing some text in here, like whatever,
and I continue typing in a bunch of text, you see it automatically scale to fit my text in here.
But if I turn it off and put it on none.
You see, the text goes over the border of my text label or if I change it to Y, then it still goes
over unless I enable text wrapped, which allows the text to wrap itself.
And then I can keep typing and it'll keep scaling downwards as I add more and more text.
So this property is pretty useful, but I'll just keep it on.
None for now.
This one is pretty simple.
Change the color of the background to whatever color you'd like.
You can change the transparency of the background as well, so you can have it fully transparent.
Partially transparent or completely opaque.
There's also a border here we can set the color of.
So maybe you want to have a black border around this text label.
You can see our black border.
We can change the thickness of our border to maybe something like that.
Now we have a thick border and of course, we can also change the mode of our border.
So maybe I want it to be in the middle of our outline here, the defined edges, or you can have it
be on the inside.
So when I increase the size instead of expanding outwards, it expands inwards.
If I set it to like 15, it expands inwards.
So that's a little cool.
The next one here is called Layout Order, and this is for sorting the order of a joy when you use something
called a I think it's called like UI grid style layout or something like that.
So I wouldn't worry about this for now.
So position holds a property called a udim.
And there's two numbers in here.
You can either store the scale or the offset scale is the best one, in my opinion, because it allows
the position of our object to be in the same place no matter the size of a person's screen.
So right now I'm using scale.
That means the anchor point, which is at the center of this object, will always be in the middle of
our screen in the x direction and and in the Y direction.
So even if I resize my screen here, my anchor point is always staying in the middle of my screen the
entire time.
What if I used offset instead?
And this measures in pixels, by the way.
Right now I have it set in a defined 500 pixels and the x direction and 100 in the Y direction.
And even if I rescale my screen, you see, it doesn't move.
It will always stay at that 500 to 100 pixel position and it will even get cut off the screen.
If I resize my screen like this.
You see, it doesn't scale with the screen at all.
The next one is rotation.
Very easy.
Just rotates our UI element in the clockwise direction.
So like 15 degrees, 40 degrees, 50 degrees, blah blah blah.
Size.
Similar idea to position holds a scale in an offset.
So right now the size of my screen UI is at a set 200 pixels and 50 pixels.
Or I can change it to be like 0.2 in the x direction and point three in the Y.
Maybe that's a little bit too much.
0.1 in the Y direction.
And now, as I scale my screen down, you can see that it continues to scale along with my screen.
So that one's pretty cool.
Size constraint is basically telling the game how you want your UI elements to scale.
So if I set it to relative x x, that means if I resize my screen it will only scale my object in the
x direction.
So as you can see, when I rescale my screen like this, my object is staying the same size in the y
direction.
But if I rescale it this way, you see that the size shifts.
Or I can do it for the Y direction.
So if I rescale it this way, the game doesn't care.
But if I do it this way, then the game does care.
Visible determines whether or not you want the UI element to be visible.
And then of course Z index set the rendering priority.
If you have multiple children, like multiple text labels, show which one will be on top of the other
clip descendants.
This is basically if you have any children that are part of your text label, any descendants, if they
go beyond the border of the text label, then they will get cut off if this is set to true.
So, for example, if I put, like, I don't know, like a frame in here.
Right now.
You see it's going over the border.
But if I set clip descendants to true see, it gets cut off.
Localization and selection.
We're not going to worry about these because selection is basically for controllers, so don't worry
about it.
And then here's all your standard text stuff like changing the font of the text, changing whether or
not you like to be bold, italic, whatever, very simple stuff.
We're not going to go too in depth with this.
So the next guy I want to talk about here are Surface UI's, and these are pretty similar to screen
guys, but you set them to be on top of parts.
So with my yellow part here, I can put a surface guy.
And to find a face to put it on, I'll put it on the top.
And I'll add another text label in here.
And as you can see, my GI is now on this part.
And there's also some other properties in here like Z offset.
If you have multiple surface GI on the same face, we can enable or disable the UI.
We have another property here called Tool Punch through.
And this is a property for like when a player is holding a tool, how close they have to be to interact
with elements on the surface UI.
So if I put like a, like a text button in here, if I set this to ten, that means any players who
are holding a tool have to be ten studs or closer in order to click the button.
Otherwise, if they're greater than ten studs away and they try to click the button, their tool is
going to be used instead of actually pressing the button like it's going to completely ignore it.
And some other extra settings we get in here are pixels per stud, which changes the resolution.
So maybe I want it to be high resolution.
I can set there to be 200 pixels in a stud and as you can see, it shrinks.
So right now our text label is set in the offset mode for its size instead of scale.
So I can actually change the size here to be scale with this neat little plug in.
It's called auto scale light, if you want to get it.
But anyways.
Yeah.
This just increases the resolution of our surface UI.
I can put some text in here.
I can scale the text.
Make it bigger.
Put in whatever I'd like.
Like below there.
So, yeah, pretty cool.
They basically just allow you to put custom text on parts that people can see.
And since my size is in scale mode, if I change the size of my part, it scales along with it.
So that's very nice.
What else are we going to talk about?
Let's talk about Billboard, guys.
A billboard UI is basically a floating 2D guy that will act like this object in your game that will
rotate around and follow your camera.
It's basically like a particle from a particle emitter.
So I can put a billboard guy in here in my part and I can add another text label.
And there you go.
You can kind of see it, but it's basically like floating around there.
Another cool thing with Billboard guys that I can put them in attachments and then I can move my attachment.
And there you go.
There's my billboard guy and it follows my camera around and there's some extra settings in here we
can take a look at.
This one is called Always on Top, and it tells the game whether or not you like this billboard guy
to render on top of everything.
So if I turn this on, that means if I were to have this part here and move it in front of it.
I still see the guy become rendered.
But if I turn it off, then I don't see it anymore.
This one here light influence basically changes how again, light influences with our billboard UI.
Just like how we saw with particle emitters.
So if I set it to zero, the shadow that is being casted for my object has no effect on my UI.
But if I turn it back on, you can see that my shadow is actually interacting with my.
Here.
Max distance.
This one is pretty simple.
Right now it's set to basically infinity, but this just sets how far away you can see the guy.
So I could set it to like 100.
And if I get greater than 100 studs away, it disappears.
Player to hide from This is a property used by scripts to hide the billboard UI from a specific player
reset on spawn.
Same general idea whether or not you want this billboard GI to be reset when a player responds, the
size is actually a little bit different for a billboard guy because the scale actually represents how
large the guy will be in studs.
So if I actually change it here to scale.
Right now it's set to something pretty small.
But if I set it to 50, that means I want it to be 50 studs in the X direction.
And then maybe we could do like 20 studs in the Y direction.
That's actually a little bit too big.
So let's just do three and then four.
How about six?
No, how about ten?
Okay, good enough.
Oh, we're going to have to also set the size in here to be scale as well.
That's why it wasn't rendering properly.
But basically the difference between scale and offset in here for the size of our billboard UI is that
offset defines a set amount of pixels on your screen.
This guy will take up.
So if I set it to like 100, no matter how far away I get from my guy, it will always take up 100 pixels
on my screen.
While scale means that this object in our game will take up three studs.
So as I continue to get farther and farther away from my guy here, when we set this to infinity again.
If I continue to get farther and farther away.
It is not changing the size of our billboard GI to stain at that ten studs width and the three studs
height.
But if I were to use offset instead, maybe I want it to be 100 pixels in the x direction and then maybe
40 in the Y direction now as I move away.
You see, it is always taken up 100 pixels on my screen in the x direction, and it's always taken up
40 pixels in the Y direction.
So that's the difference with size on billboards, you guys.
And I think that basically wraps up all the basics with DUIs and robots.